import React, { useEffect, useState } from 'react'
import './App.css'
import http from './utils/http'
import { Tabs, InfiniteScroll } from 'antd-mobile'

const date = [
  {
    mon: '9月',
    day: '1'
  },
  {
    mon: '9月',
    day: '2'
  },
  {
    mon: '9月',
    day: '3'
  },
  {
    mon: '9月',
    day: '4'
  },
  {
    mon: '9月',
    day: '5'
  },
  {
    mon: '9月',
    day: '6'
  },
  {
    mon: '9月',
    day: '7'
  },
  {
    mon: '9月',
    day: '8'
  },
  {
    mon: '9月',
    day: '9'
  },
  {
    mon: '9月',
    day: '10'
  },
  {
    mon: '9月',
    day: '11'
  },
  {
    mon: '9月',
    day: '12'
  },
  {
    mon: '9月',
    day: '13'
  },
  {
    mon: '9月',
    day: '14'
  },
  {
    mon: '9月',
    day: '15'
  },
  {
    mon: '9月',
    day: '16'
  },
  {
    mon: '9月',
    day: '17'
  },
  {
    mon: '9月',
    day: '18'
  },
  {
    mon: '9月',
    day: '19'
  },
  {
    mon: '9月',
    day: '20'
  },
  {
    mon: '9月',
    day: '21'
  },
  {
    mon: '9月',
    day: '22'
  },
  {
    mon: '9月',
    day: '23'
  },
  {
    mon: '9月',
    day: '24'
  },
  {
    mon: '9月',
    day: '25'
  },
  {
    mon: '9月',
    day: '26'
  },
  {
    mon: '9月',
    day: '27'
  },
  {
    mon: '9月',
    day: '28'
  },
  {
    mon: '9月',
    day: '29'
  },
  {
    mon: '9月',
    day: '30'
  },
]
function App() {
  // 定义列表参数
  const [hasMore, setHasMore] = useState(true)
  const [start, setStart] = useState('北京')
  const [end, setEnd] = useState('广州')
  const [page, setPage] = useState(1)
  const [list, setList] = useState([])
  // 获取列表数据
  const getList = async () => {
    const res = await http.post('/api/trip/train', {
      start,
      end,
      page
    })

    console.log(res);

    const { code, data } = res.data

    if (code === 200) {
      setList([...list, ...data])
      setPage((prev) => prev + 1)
    }

    if (data.length === 0) {
      setHasMore(false)
    }

  }

  useEffect(() => {
    getList()
  }, [])

  return (
    <div>
      <div>
        <Tabs defaultActiveKey='1'>
          {
            date.map((item,ind)=>(
               <Tabs.Tab title={<div className='date'> <span>{item.day}</span> <span>{item.mon}</span> </div>} key={ind} />
            ))
          }
        </Tabs>
      </div>
      <div>
        <Tabs>
          <Tabs.Tab title='直达' key='1'>
            <div>
              {
                list?.map((item, ind) => (
                  <div key={ind} className='box'>
                    <div className='list'>
                      <span>{item.start}</span>
                      <span>{item.startTime}</span>
                      <span>{item.end}</span>
                      <span>商务座<b>有票</b></span>
                      <span>一等座<b>有票</b></span>
                      <span>二等座<b>有票</b></span>
                    </div>
                    <div className='prick'>
                      <span>{item.tick.vip}</span>
                    </div>
                  </div>
                ))
              }
            </div>
            <InfiniteScroll loadMore={getList} hasMore={hasMore} />
          </Tabs.Tab>
          <Tabs.Tab title='汽车' key='2'>
            汽车
          </Tabs.Tab>
          <Tabs.Tab title='机票' key='3'>
            机票
          </Tabs.Tab>
          <Tabs.Tab title='中转' key='4'>
            中转
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  )
}

export default App
